/**
 * 所有主题模式下的 Vxe Table CSS 变量
 * 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量，目的是使 Vxe Table 支持多主题模式且样式统一
 * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
 */

:root {
  /*color*/
  --vxe-ui-font-color: var(--el-text-color-regular);
  --vxe-ui-font-primary-color: var(--el-color-primary);

  /* color */
  --vxe-ui-primary-color: var(--el-color-primary);
  --vxe-ui-success-color: var(--el-color-success);
  --vxe-ui-info-color: var(--el-color-info);
  --vxe-ui-warning-color: var(--el-color-warning);
  --vxe-ui-danger-color: var(--el-color-danger);

  --vxe-ui-font-lighten-color: var(--el-text-color-primary);
  --vxe-ui-primary-lighten-color: var(--el-color-primary-light-3);
  --vxe-ui-success-lighten-color: var(--el-color-success-light-3);
  --vxe-ui-info-lighten-color: var(--el-color-info-light-3);
  --vxe-ui-warning-lighten-color: var(--el-color-warning-light-3);
  --vxe-ui-danger-lighten-color: var(--el-color-danger-light-3);

  --vxe-ui-font-darken-color: var(--el-text-color-secondary);
  --vxe-ui-primary-darken-color: var(--el-color-primary-dark-2);
  --vxe-ui-success-darken-color: var(--el-color-success-dark-2);
  --vxe-ui-info-darken-color: var(--el-color-info-dark-2);
  --vxe-ui-warning-darken-color: var(--el-color-warning-dark-2);
  --vxe-ui-danger-darken-color: var(--el-color-danger-dark-2);

  --vxe-ui-font-disabled-color: var(--el-text-color-disabled);
  --vxe-ui-primary-disabled-color: var(--el-color-primary-light-5);
  --vxe-ui-success-disabled-color: var(--el-color-success-light-5);
  --vxe-ui-info-disabled-color: var(--el-color-info-light-5);
  --vxe-ui-warning-disabled-color: var(--el-color-warning-light-5);
  --vxe-ui-danger-disabled-color: var(--el-color-danger-light-5);

  /*input/radio/checkbox*/
  --vxe-ui-input-border-color: var(--el-border-color);
  --vxe-ui-input-disabled-color: var(--el-text-color-disabled);
  --vxe-ui-input-disabled-background-color: var(--el-fill-color-light);
  --vxe-ui-input-placeholder-color: var(--el-text-color-placeholder);

  /*popup*/
  --vxe-ui-table-popup-border-color: var(--el-border-color);

  /*table*/
  --vxe-ui-table-header-font-color: var(--el-text-color-regular);
  --vxe-ui-table-footer-font-color: var(--el-text-color-regular);
  --vxe-ui-table-border-color: var(--el-border-color-lighter);
  /* --vxe-ui-table-header-background-color: var(--el-bg-color); */
  --vxe-ui-table-body-background-color: var(--el-bg-color);
  --vxe-ui-table-footer-background-color: var(--el-bg-color);

  --vxe-ui-table-row-hover-background-color: var(--el-fill-color-light);
  --vxe-ui-table-row-current-background-color: var(--el-fill-color-light);
  --vxe-ui-table-row-hover-current-background-color: var(--el-fill-color-light);

  --vxe-ui-table-checkbox-range-background-color: var(--el-fill-color-light);

  /*menu*/
  --vxe-ui-table-menu-background-color: var(--el-bg-color-overlay);

  /*loading*/
  --vxe-ui-loading-color: var(--el-color-primary);
  --vxe-ui-loading-background-color: var(--el-mask-color);

  /*validate*/
  --vxe-ui-table-validate-error-color: var(--el-color-danger);

  /*toolbar*/
  --vxe-ui-toolbar-background-color: var(--el-bg-color);
  --vxe-ui-toolbar-custom-active-background-color: var(--el-bg-color-overlay);
  --vxe-ui-toolbar-panel-background-color: var(--el-bg-color-overlay);

  /*pager*/
  --vxe-ui-pager-background-color: var(--el-bg-color);

  /*modal*/
  --vxe-ui-modal-header-background-color: var(--el-bg-color);
  --vxe-ui-modal-body-background-color: var(--el-bg-color);
  --vxe-ui-modal-border-color: var(--el-border-color);

  /*button*/
  --vxe-ui-button-default-background-color: var(--el-bg-color-overlay);

  /*input*/
  --vxe-ui-input-background-color: var(--el-fill-color-blank);
  --vxe-ui-input-panel-background-color: var(--el-fill-color-blank);

  /*form*/
  --vxe-ui-form-background-color: var(--el-bg-color);
  --vxe-ui-form-validate-error-color: var(--el-color-danger);

  /*select */
  --vxe-ui-select-option-hover-background-color: var(--el-bg-color-overlay);
  --vxe-ui-select-panel-background-color: var(--el-bg-color);
}

html[data-vxe-ui-theme='light'] {
  --vxe-ui-table-header-background-color: #e5eeff;
}

html[data-vxe-ui-theme='dark'] {
  --vxe-ui-table-header-background-color: #3d3d3d;
}
